import './search.scss'
import React, { Component } from 'react';
import { LeftOutline, SearchOutline ,DeleteOutline} from 'antd-mobile-icons'
import { connect } from 'react-redux';
import { Toast } from 'antd-mobile'

class search extends Component {
    constructor(props){
        super(props);
        this.state = {
            inputText:'',
        }
    }
    toshouye() {
        this.props.history.goBack()
    }
    handleChange(e){
        this.setState({ [e.target.name]:e.target.value })
    }
    handleAdd(){
        if( this.state.inputText ){        
            this.props.addsearch( this.state.inputText );
            this.setState( { inputText:'' } );
        }else{
            Toast.show({
                content: '输入框不能为空！',
              })
        }
    }
    handleqk(){
        this.props.qingkong(this.state.kong)
        
    }
    render() {
        return (
            <div className='search'>
                <div className="top">
                    <p onClick={this.toshouye.bind(this)}><LeftOutline /></p>
                    <div className='topcenter'>
                        <SearchOutline className='tu1' />
                        <input type="text" name='inputText' placeholder='请输入搜索关键字' value={this.state.inputText} onChange={this.handleChange.bind(this)}/>
                    </div>
                    <div className="topright" onClick={this.handleAdd.bind(this)}>搜索</div>
                </div>

                <div className="main">
                    <p className="p1">历史搜索</p>
                    <DeleteOutline className='mainicon' onClick={this.handleqk.bind(this)}/>
                </div>

                <div className="bottom">
                    {
                        this.props.searchlist.map((item,index)=>{
                            return (
                                 <span className="p2" key={index}>{item}</span>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default connect(
    (state)=>{
        return{
            searchlist:state.searchlist
        }
    },
    (dispatch)=>{
        return {
            addsearch(payload){
                dispatch({type:"ADD_SEARCH",payload})
            },
            qingkong(){
                dispatch({type:"QK_SEARCH"})
            }
        }
    }
)(search);